<template>
  <div class="bankcard-box page" ref="webview">
    <van-nav-bar title="银行卡管理" class="bg_white" left-arrow @click-left="$router.go(-1)" />
    <div class="content" v-if="dataList.length>0">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" v-if="dataList.length>0">
        <van-list v-model="loading" :finished="finished" :finished-text="dataList.length>5?'没有更多了':''" @load="onLoad" :offset="50" :immediate-check="false" v-if="dataList.length>0">
          <template v-for="(item,index) in dataList">
            <div class="list gradient-wrap" :key="index" @click="goEdit(item.id)">
              <div class="img">
                <img src="/static/images/icon-unionpay.png" />
              </div>
              <div class="info">
                <div class="cardName">{{item.bank_name}}</div>
                <div class="cardholder">储蓄卡</div>
                <div class="cardNum">{{item.account_no}}</div>
              </div>
              <span class="icon-del" @click.stop="delBankCard(item.id)"></span>
            </div>
          </template>
        </van-list>
      </van-pull-refresh>
    </div>
    <div class="addCard">
      <van-button color="#fff" round class="btn" @click="$router.push({path: '/bankcard/add'})">添加银行卡</van-button>
    </div>
  </div>
</template>
<script>
import mixins from '@/utils/mixins';
export default {
  name: 'bankcard',
  data () {
    return {
      disabled: false,
      isLoading: false,
      paramsUrl: 'list',
      apiType: 'user',
      apiUrl: 'bank',
      params: {
        type: 3
      }
    };
  },
  mixins: [mixins],
  created () {
    this.getList(this.apiUrl, true);
  },
  destroyed () {
  },
  methods: {
    goEdit (id) {
      this.$router.push({ path: '/bankcard/edit', query: { id: id } });
    },
    delBank (id) {
      this.$API.user.bank({ id: id }, 'delete').then(res => {
        this.$toast(!res.code ? '删除成功' : res.message);
        !res.code && this.getList(this.apiUrl, true);
        this.$toast.clear();
      });
    },
    delBankCard (id) {
      this.$dialog.confirm({
        title: '温馨提醒',
        message: '是否确认删除银行卡',

        confirmButtonText: '确 认',
        cancelButtonText: '取 消'
      }).then(() => {
        this.delBank(id);
      }).catch(() => {
        // on cancel
      });
    }
  }
};
</script>
<style lang="less" scoped>
.bankcard-box {
  .addCard {
    color: #fff;
    font-size: 32px;
    text-align: center;
    padding: 30px 40px;
    right: 40px;
    .btn {
      width: 100%;
    }
    .van-button__text {
      color: #2560e1;
      font-size: 32px;
      &::before {
        content: '+';
        display: inline-block;
        font-size: 40px;
        margin-right: 10px;
      }
    }
  }
  .content {
    height: calc(100% - 242px);
    box-sizing: border-box;
    overflow: auto;
    .list {
      margin: 24px;
      border-radius: 12px;
      padding: 34px 26px 20px;
      position: relative;
      color: #fff;
      height: 244px;
      background: linear-gradient(80deg, #51b3f5 0%, #2560e1 100%);
      display: flex;
      .img {
        width: 60px;
        height: 120px;
        img {
          width: 60px;
          height: auto;
        }
      }
      .info {
        flex: 1;
        padding-left: 20px;
        color: #fff;
      }
      .cardName {
        font-size: 28px;
      }
      .cardholder {
        font-size: 24px;
        padding: 10px 0 5px;
      }
      .cardNum {
        font-size: 48px;
        padding-top: 10px;
      }
    }
    .icon-del {
      display: block;
      position: absolute;
      right: 27px;
      top: 26px;
      width: 45px;
      height: 34px;
      background-image: url('/static/img/icon-bankcard-del.png');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: contain;
    }
  }
}
</style>
